<template>
  <!-- 输入框类型 -->
  <el-col v-if="attr.type == 'input'" :span="24">
    <el-form-item>
      <template #label>
        <div class="wft-flex-ai">
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-input v-model="attr.value" size="small" placeholder="请输入" class='wft-w-95' />
    </el-form-item>
  </el-col>
  <!-- 开关属性 -->
  <el-col v-else-if="attr.type == 'switch'" :span="24">
    <el-form-item>
      <template #label>
        <div class="wft-flex-ai">
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-switch v-model="attr.value" size="small" class='wft-w-95' />
    </el-form-item>
  </el-col>
  <!-- 数字类型 -->
  <el-col v-else-if="attr.type == 'input_number'" :span="24">
    <el-form-item>
      <template #label>
        <div class="wft-flex-ai">
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-input-number v-model="attr.value" size="small" controls-position="right" class="wft-w-95" />
    </el-form-item>
  </el-col>
  <!-- 颜色类型 -->
  <el-col v-else-if="attr.type == 'input_color'" :span="24">
    <el-form-item>
      <template #label>
        <div class="wft-flex-ai">
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <div class="wft-flex wft-w-100">
        <el-input v-model="attr.value" size="small" clearable class="wft-w-80" />
        <el-color-picker v-model="attr.value" show-alpha size="small" />
      </div>
    </el-form-item>
  </el-col>
  <!-- 下拉框属性 -->
  <el-col v-else-if="attr.type == 'select'" :span="24">
    <el-form-item>
      <template #label>
        <div class="wft-flex-ai">
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-select v-model="attr.value" size="small" class="wft-w-95">
        <el-option
          v-for="item in attr.select"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </el-col>
  <!-- 表单校验 -->
  <el-col v-else-if="attr.type == 'rules'" :span="24">
    <el-row>
      <el-col :span="24">
        <el-form-item>
          <template #label>
            <div class="wft-flex-ai">
              <span>{{ attr.label }}</span>
              <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
                <el-icon class="icon-info"><InfoFilled /></el-icon>
              </el-tooltip>
            </div>
          </template>
          <EditorModel
            v-model="ruleData"
            language="json"
            :text="attr.label"
            :dialog-title="attr.label"
            bgColor="#f5f5f5"
            :params="''"
          >
            <template #tips>
              <p>配置校验json，示例可参考：https://www.uviewui.com/components/form.html</p>
            </template>
          </EditorModel>
        </el-form-item>
        <el-form-item>
          <el-button class="wft-w-95" type="info" @click="updateRuleData()">更新规则</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-col>
  <!-- vModel -->
  <el-col v-else-if="attr.type == 'vModel' && !(curComp.type == 'advanced' && vForAttr?.value.open)" :span="24">
    <el-form-item :rules="[{ required: true, message: '请输入变量名称', trigger: 'blur' }]">
      <template #label>
        <div class="wft-flex-ai">
          <span>{{(curComp.parentId || vForAttr?.value.open) ? '字段' : '变量'}}名称</span>
          <el-tooltip effect="dark" :content="curComp.type == 'inertia' ? '绑定页面变量用于控制其弹出及收起' : '必填项，组件中定义的变量，若开启for循环则是集合中每一项的字段名，如果嵌套在容器内，则是容器数据中渲染的字段'" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-input v-if="curComp.parentId || vForAttr?.value.open" v-model="attr.value" size="small" placeholder="请输入" clearable />
      <PageDataModel v-else :panel-json="panelJson" v-model="attr.value" />
    </el-form-item>
  </el-col>
  <!-- 循环自身配置 -->
  <el-col v-else-if="!curComp.parentId && attr.type == 'vFor'" :span="24">
    <el-form-item>
      <template #label>
        <div class="wft-flex-ai">
          <span>开启循环</span>
          <el-tooltip effect="dark" content="循环该控件，此属性不打开则不起作用。" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-switch v-model="attr.value.open" size="small" />
    </el-form-item>
    <el-form-item v-if="attr.value.open" :rules="[{ required: true, message: '请输入变量名称', trigger: 'blur' }]">
      <template #label>
        <div class="wft-flex-ai">
          <span>遍历变量</span>
          <el-tooltip effect="dark" content="必填项，遍历的页面变量" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <PageDataModel :panel-json="panelJson" v-model="attr.value.variable" />
    </el-form-item>
    <el-form-item v-if="attr.value.open">
      <template #label>
        <div class="wft-flex-ai">
          <span>遍历数量</span>
          <el-tooltip effect="dark" content="遍历的数量，如果大于数据返回的长度则以返回的数据为准（0表示遍历所有返回的集合数据）" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-input-number v-model="attr.value.size" size="small" :min="0" controls-position="right" class="wft-w-95" />
    </el-form-item>
    <el-form-item v-if="attr.value.open">
      <template #label>
        <div class="wft-flex-ai">
          <span>遍历间隔</span>
          <el-tooltip effect="dark" content="纵向遍历的间隔（百分比）" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-input-number v-model="attr.value.gutter" size="small" controls-position="right" class="wft-w-95" />
    </el-form-item>
  </el-col>
  <!--数据源 页面数据绑定 -->
  <el-col v-else-if="attr.type == 'variable'" :span="24">
    <el-form-item>
      <template #label>
        <div class="wft-flex-ai">
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <PageDataModel :panel-json="panelJson" v-model="attr.value" />
    </el-form-item>
  </el-col>
  <!-- 宫格容器特定配置 -->
  <el-col v-else-if="attr.type == 'trellis_border'">
    <el-form-item>
      <template #label>
        <div class="wft-flex-ai">
          <span>边框显示</span>
          <el-tooltip effect="dark" content="是否显示宫格的边框" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-switch v-model="attr.value.show" active-color="#13ce66" inactive-color="#ff4949" />
    </el-form-item>
    <el-form-item v-show="attr.value.show">
      <template #label>
        <div class="wft-flex-ai">
          <span>边框颜色</span>
          <el-tooltip effect="dark" content="宫格的边框颜色" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <div class="wft-flex">
        <el-input v-model="attr.value.color" size="small" class="wft-w-82" />
        <el-color-picker v-model="attr.value.color" show-alpha size="small" />
      </div>
    </el-form-item>
    <el-form-item v-show="attr.value.show">
      <template #label>
        <div class="wft-flex-ai">
          <span>边框样式</span>
          <el-tooltip effect="dark" content="宫格的边框样式" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-select v-model="attr.value.type" class="wft-w-95" size="small">
        <el-option label="虚线" value="dashed" />
        <el-option label="实线" value="solid" />
        <el-option label="点线" value="dotted" />
      </el-select>
    </el-form-item>
    <el-form-item v-show="attr.value.show">
      <template #label>
        <div class="wft-flex-ai">
          <span>边框宽度</span>
          <el-tooltip effect="dark" content="宫格的边框宽度" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-input-number v-model="attr.value.width" class="wft-w-95" size="small" controls-position="right" />
    </el-form-item>
  </el-col>
  <!-- icon图标 -->
  <el-col v-else-if="attr.type == 'icon'">
    <el-form-item>
      <template #label>
        <div class="wft-flex-ai">
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <IconModel v-model="attr.value" />
    </el-form-item>
  </el-col>
  <!-- uview图标下拉框 -->
  <el-col v-else-if="attr.type == 'icon_select'" :span="24">
    <el-form-item>
      <template #label>
        <div class="wft-flex-ai">
          <span>{{ attr.label }}</span>
          <el-tooltip v-if="attr.desc" effect="dark" :content="attr.desc" placement="top">
            <el-icon class="icon-info"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <IconSelect v-model="attr.value" />
    </el-form-item>
  </el-col>
</template>
<script setup lang="ts">
import { InfoFilled } from '@element-plus/icons-vue'
import EditorModel from '../EditorModel/index.vue'
import { computed, ref, watch } from 'vue'
import { useMessage } from '@/hooks'
import PageDataModel from '../PageDataModel/index.vue'
import IconModel from '../IconModel/index.vue'
import IconSelect from '../IconSelect/index.vue'

const props = defineProps<{
  attr: IAttr,
  curComp: TComp,
  panelJson: TPanel
}>()

const staticValue = ref('')
const ruleData = ref('')

const vForAttr = computed(() => props.curComp.attrs.find(item => item.name === 'vFor'))

watch(() => props.attr.type, () => {
  if(props.attr.type === 'rules') {
    ruleData.value = JSON.stringify(props.attr.value)
  }
}, { deep: true, immediate: true })

watch(() => props.curComp.id, () => {
  setTimeout(() => {
    staticValue.value = JSON.stringify(props.curComp.data)
  }, 100)
}, { deep: true, immediate: true })

// 设置静态数据
function updateRuleData () {
  try {
    props.attr.value = JSON.parse(ruleData.value)
    useMessage().success('数据更新成功！')
  } catch (e) {
    useMessage().error('数据有误！')
  }
}

</script>
<style scoped>
.wft-w-85 {
  width: 85%;
}

.wft-w-100 {
  width: 100%;
}

.wft-w-82 {
  width: 82%;
}

.wft-flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.wft-upload-bg img {
  width: 100%;
  height: 100%;
}

.icon-config-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 4px;
}

.icon-config-item {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  margin-left: 15px;
  border: 1px solid #DCDFE6;
  border-radius: 3px;
  cursor: pointer;
  transition: all .3s;
}

.icon-config-item:hover {
  border-color: #c0c4cc;
  transform: scale(1.04, 1.04);
}

.margin-left-4 {
  margin-left: 4px;
}

.icon-info {
  margin-left: 4px;
}
</style>
